<template>
  <div class="commonLineChart">
    <!-- <p class="commonLineChart-info">
      最大值：{{ infoObj.max }} 最小值：{{ infoObj.min }} 平均值：{{
        infoObj.average
      }}
      方差：{{ infoObj.variance }}
    </p> -->
    <!-- <div class="commonLineChart-btnGroup"> -->
      <!-- <el-button type="primary" size="small" plain class="fL mR"
        >阀值</el-button
      >
      <el-button type="primary" size="small" plain class="fL mR"
        >告警状态</el-button
      > -->
      <!-- <el-select
        v-model="selValue"
        placeholder="请选择查看其它测点数据"
        size="small"
        class="fR"
        style="width: 309px;"
      >
        <el-option
          v-for="item in selOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select> -->
    <!-- </div> -->
    <div class="commonLineChart-chart" ref="lineChart"></div>
  </div>
</template>

<script>
import echarts from "echarts";
import { mapState } from "vuex"

export default {
  data () {
    return {
      seriesName: '阀值',
      selValue: '',
      selOptions: [{
        label: '测定001',
        value: '001'
      }]
    };
  },
  props: {
    seriesData: {
      type: Array,
      required: true
    },
    xAxisData: {
      type: Array,
      required: true
    },
    infoObj: {
      type: Object,
      required: true
    }

  },
  computed:{
    ...mapState("realMonitor", {
      pointDetail: "xgPointDetail",
    }),
  },
  mounted () {
    this.drawLine();
    window.addEventListener("resize", () => {
      this.line.resize();
    });
  },
  methods: {
    drawLine () {
      this.line = new echarts.init(this.$refs.lineChart);
      this.line.setOption({
        title: {
          text: this.pointDetail.name,
          left: "center",
          top: "2%",
          textStyle: {
            color: "#327BDC",
            fontSize: 18
          }
        },
        grid: {
          top: '10%',
          right: '3%',
          left: '6%'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: [{
          type: 'category',
          data: this.xAxisData,
          axisLine: {
            show: true,
            lineStyle: {
              color: "#E5E6EB"
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#E5E6EB"
            }
          },
          boundaryGap: false,
          axisLabel: {
            color: "#A7A6AF",
            fontSize: 15
          }
        }],
        yAxis: [{
          type: 'value',
          max:this.seriesData[this.seriesData.length-1] * 2,
          axisTick: {
            show: false
          },
          splitNumber: 4,
          splitLine: {
            show: false
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ['#F5F6FA', '#fff']
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#E5E6EB"
            },
          },
          axisLabel: {
            color: "#A7A6AF",
            fontSize: 15
          }
        }],
         dataZoom: [
        {
            show: false,
            realtime: true,
            // start: 70,
            // end: 100
        },
        {
            type: 'inside',
            realtime: true,
            // start: 70,
            // end: 100
        }
    ],
        series: [{
          name: this.pointDetail.name,
          data: this.seriesData,
          type: 'line',
          smooth:true,
          // symbol: 'emptyCircle',
          symbolSize: 3,
          lineStyle: {
            color: '#699EE5',
            shadowBlur: 12,
            shadowColor: 'rgb(33,148,246,0.5)',
            shadowOffsetX: 1,
            shadowOffsetY: 1
          },
          areaStyle: { //区域填充样式
						normal: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: 'rgba(65, 165, 245,1)'
								},
								{
									offset: 1,
									color: 'rgba(228, 244, 255,0)'
								}
							], false),
							shadowBlur: 0 
						}
					},
          itemStyle: {
            color: '#699EE5',
            borderWidth: 1
          }
        }]
      });

       setTimeout(()=>{
                    this.line.dispatchAction({
                        type: 'showTip',
                        seriesIndex:0,  // 显示第几个series
                        dataIndex: this.seriesData.length-1 // 显示第几个数据
                    });
                    console.log(this.seriesData)
                })
    }
  },
  components: {},
  watch:{
    seriesData:{
      handler(newVal){
        // console.log(newVal)
         this.drawLine();
      },
      deep:true
    },
    pointDetail:{
      handler(newVal){
        this.drawLine();
      }
    }
  }
  
};
</script>

<style lang="scss" scoped>
.commonLineChart {
  width: 100%;
  height: 100%;
  position: relative;
  &-info {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 12px;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    z-index: 999;
    cursor: default;
  }
  &-btnGroup {
    padding: 0px 3% 13px 0;
    width: 100%;
    overflow: hidden;
    position: absolute;
    top: 15%;
    left: 0;
    z-index: 999;
  }
  &-chart {
    width: 100%;
    height: 100%;
  }
  .fR {
    float: right;
  }
  .fL {
    float: left;
  }
  .mR {
    margin-right: 10px;
  }
}
.commonLineChart-chart{
  width: 100%;
  height: 100%;
}
.commonLineChart-btnGroup{
  margin-top: -30px !important;
}
</style>
